<!--
  修改密码
 -->
<template>
  <v-dialog v-model="dialog" max-width="400px" persistent >
        <v-card height="450px" style="overflow: hidden;">
            <v-toolbar flat color="primary" dark height="60px">
              <v-spacer></v-spacer>
              <v-toolbar-title>修改密码</v-toolbar-title>
              <v-spacer></v-spacer>
            </v-toolbar>
            <v-col cols="12" class="px-6">
                <v-text-field
                  class="pt-6"
                  clearable
                  dense
                  outlined
                  type="password"
                  label="旧密码"
                  :error-messages="oldpwdError"
                  v-model="oldpwd"
                  prepend-inner-icon="mdi-key-minus"
                 />
            </v-col>
            <v-col cols="12" class="px-6">
                  <v-text-field
                    clearable
                    dense
                    type="password"
                    outlined
                    :error-messages="newpwdError"
                    label="新密码"
                    v-model="newpwd"
                    prepend-inner-icon="mdi-key-plus"
                   />
            </v-col>
            <v-col cols="12" class="px-6">
                  <v-text-field
                    clearable
                    dense
                    type="password"
                    outlined
                    :error-messages="againpwdError"
                    label="确定密码"
                    v-model="againpwd"
                    prepend-inner-icon="mdi-key-change"
                   />
            </v-col>
            <v-col cols="12" class="px-5 d-flex" >
              <v-spacer></v-spacer>
              <v-btn   class="ma-auto" text
               @click="closeFn">
                取消
              </v-btn>
              <v-btn   class="ma-auto" text
              @click="sureFn">
                确定
              </v-btn>
            </v-col>
          </v-card>

          <!-- 消息条 -->
          <v-snackbar
              v-model="snackbar"
              bottom
              :color="snackbarColor"
              :timeout="snackbarTimeout"
            >
              {{ snackbarText }}
             <v-btn
               dark
               text
               @click="snackbar = false"
             >
               关闭
             </v-btn>
          </v-snackbar>

  </v-dialog>
</template>

<script>
import { changePwdFn } from "@/assets/js/mainPage.js"

export default{
  data:()=>({
     dialog:false,

     oldpwd:"",
     newpwd:"",
     againpwd:"",

     oldpwdError:null,
     newpwdError:null,
     againpwdError:null,

     snackbar:false,//消息条
     snackbarText:"",
     snackbarColor:"success",
     snackbarTimeout:1200,

  }),
  props:{
     pDialog:{
       default:false,
     },
  },
  watch:{
     oldpwd(value){
        //输入为连续空格
        if(value && value !="" && value.trim() == ""){
          this.oldpwdError="请输入非空内容"
        }else{
          this.oldpwdError=null
        }
     },
     newpwd(value){
       //输入为连续空格
        if(value && value !="" && value.trim() == ""){
           this.newpwdError = "请输入非空内容"
           return;
        }
        if(value && value !="" && value.trim() != ""){
           this.newpwdError = null
        }


        if( value != this.againpwd && this.againpwd && value && this.againpwd.trim() != ""){
          this.newpwdError = "两次输入密码不一致"
          this.againpwdError = null
          return;
        }
        if(value == this.againpwd && this.againpwd &&  value && this.againpwd.trim() != ""){
          this.newpwdError = null
          this.againpwdError = null
          return;
        }


     },
     againpwd(value){
        if(value && value !="" && value.trim() == ""){
           console.log(value)
           this.againpwdError = "请输入非空内容"
           return
        }

        if(value && value !="" && value.trim() != ""){
           this.againpwdError = null
        }

        if(value != this.newpwd && this.newpwd &&  value && this.newpwd.trim() != ""){
          this.newpwdError = null
          this.againpwdError = "两次输入密码不一致"
          return;
        }
        if(value == this.newpwd && this.newpwd && value && this.newpwd.trim() != ""){
          this.newpwdError = null
          this.againpwdError = null
          return;
        }
     },

     pDialog(val){
       if(val){
         this.dialog = true;
         //清空上一次填写的密码
         this.newpwd="";
         this.oldpwd="";
         this.againpwd="";
       }
     },
     dialog(val){
       if(!val){
         this.$emit("close")
       }
     },

  },
  methods:{
      closeFn(){
        this.dialog = false
      },
      //确定函数
      sureFn(){

          if(!this.oldpwd || !this.newpwd || !this.againpwd){
              this.showSnackbar("存在空值","info")
              return;
          }
          if(this.oldpwdError){
             this.showSnackbar(this.oldpwdError,"info")
             return;
          }
          if(this.newpwdError){
             this.showSnackbar(this.newpwdError,"info")
             return;
          }
          if(this.againpwdError){
             this.showSnackbar(this.againpwdError,"info")
             return;
          }

          var promiseOb = changePwdFn(this.oldpwd.trim(), this.newpwd.trim())
          promiseOb.then((res)=>{
            if(res.data.code == 200){
                this.showSnackbar("修改成功，请重新登录")
            }else if(res.data.code == 400){
                this.showSnackbar(res.data.msg,"error")
            }else{
                return Promise.reject()
            }
          }).catch((rej)=>{
            this.showSnackbar("修改失败","error")
          })

      },
      //消息框显示
      showSnackbar(info="",color="success",isshow=true){
          this.snackbarText= info;
          this.snackbarColor= color;
          this.snackbar= isshow;
      },
  }
}

</script>

<style>

</style>
